<template>
	<div>
		<header class="mui-bar mui-bar-nav" :style="{'background-image':'none','background-color':skinColor}" v-if="$store.state.isShowHead">
			<a v-if="$store.state.isShowBack" @click="$router.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">{{$store.state.navbarTitle}}</h1>
		</header>
		<transition>
			<router-view></router-view>
		</transition>
		<nav v-if="$store.state.isShowFoot">
			<a v-for="(item,index) in tabBar"  :class="[{'router-link-active':index==curRouterLink},item.icon]" @click="routerIn(item)">{{item.name}}</a>
		</nav>
	</div>
</template>

<script>
	import store from "@/store/index.js";
	export default {
		data() {
			return {
				index: 0,
				curRouterLink: 0,
				tabBar: [{
						name: "首页",
						icon: "homeIcon",
						path: "/",
						index: 0
					},
					{
						name: "分类",
						icon: "categoryIcon",
						path: "/category",
						index: 1
					},
					{
						name: "购物车",
						icon: "cartIcon",
						path: "/cart",
						index: 2
					},
					{
						name: "我的",
						icon: "userIcon",
						path: "/mine",
						index: 3
					}
				]
			};
		},
		mounted() {

		},
		computed: {
			skinColor() {
				return store.state.skinColor;
			}
		},
		methods: {
			routerIn(item) {
				this.curRouterLink = item.index;
				this.$router.push({path:item.path});
			},

		}
	};
</script>

<style>
	header+div {
		margin-top: 44px;
	}

	.mui-bar-tab {
		background: #fff;
	}

	.mui-bar-tab .mui-tab-item ._mui-icon {
		top: 0;
	}

	header.skin {
		background-image: none;
		background-color: rgb(0, 176, 240);
	}

	.mui-bar .mui-title {
		color: #fff;
	}

	.mui-bar-tab .mui-tab-item.mui-active {
		color: #008000;
	}

	.mui-bar a {
		color: #fff;
	}

	nav a {
		color: #000;
	}

	.router-link-active {
		color: #31bd80;
	}
</style>
